<!--
 * @Author: your name
 * @Date: 2021-12-24 19:50:34
 * @LastEditTime: 2022-02-28 16:08:31
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue\vue-douban-pc\src\views\MoviePlay.vue
-->
<template>
    <div class="play">
        <div class="content-box">
            <video width="930" height="500" controls="controls"></video>
            <div
                class="barrage"
                v-for="cmt in allcomment.slice(0, 1)"
                :key="cmt.bag_id"
            >{{ cmt.barrage }}</div>
            <div
                class="barrage1"
                v-for="cmt in allcomment.slice(1, 2)"
                :key="cmt.bag_id"
            >{{ cmt.barrage }}</div>
            <div
                class="barrage2"
                v-for="cmt in allcomment.slice(2, 3)"
                :key="cmt.bag_id"
            >{{ cmt.barrage }}</div>
            <div class="content-img">
                <img :src="baseUrl + this.movie.tv_image" alt />
            </div>
        </div>
        <div class="introduction">
            <div class="all">
                <div class="function">{{ this.movie.tv_play }}次专辑播放</div>
                <div class="comment">
                    <el-input v-model="barrage" placeholder="请发布弹幕"></el-input>
                    <el-button @click="push">发表</el-button>
                </div>
            </div>
            <div class="details-box">
                <h1>{{ this.movie.tv_title }}</h1>
                <span class="score-color">{{ this.movie.tv_score }}</span>
                <span class="color">{{ this.movie.tv_date }}</span>
                <span class="color">{{ this.movie.tv_type }}</span>
                <div class="details">
                    <span>电影简介:</span>
                    <p>{{ this.movie.tv_detail }}</p>
                </div>
            </div>
        </div>
        <div class="comment-box">
            <h3>影视评论</h3>
            <div class="comment-btn">
                <el-input type="textarea" placeholder="请输入内容" v-model="comment"></el-input>
                <el-button @click="submit">提交评论</el-button>
            </div>
            <div class="show-comments">
                <div
                    class="comments"
                    v-for="cmts in comments"
                    :key="cmts.commt_id"
                >{{ cmts.username }} 评论: {{ cmts.comment }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import mixin from "../utils/mixin";
import { getUserInfo } from "../utils/auth";
export default {
    name: 'VueMovieplay',
    mixins: [mixin],
    data() {
        return {
            value: null,
            movie: {},
            barrage: "",
            movieId: "",
            userId: "",
            userName: "",
            allcomment: {},
            comment: "",
            comments: {},
        };
    },
    computed: {

    },
    created() {
        let movieId = this.$route.params.id;
        this.movieId = this.$route.params.id;
        this.userId = getUserInfo().users.user_id;
        this.userName = getUserInfo().users.username;
        this.addPlay(movieId);
        this.getMovieDetail(movieId);
        this.getComment(movieId);
        this.getSubmit(movieId);
    },
    mounted() {

    },
    methods: {
        getMovieDetail(movieId) {
            this.axios.get('/getMovie', {
                params: {
                    id: movieId,
                }
            }).then((res) => {
                this.movie = res.data[0];
                console.log(this.movie);
            })
        },
        push() {
            this.axios.post('/postBarrage', {
                userId: this.userId,
                userName: this.userName,
                movieId: this.movieId,
                barrage: this.barrage,
            }).then((res) => {
                let { state } = res.data.data;
                if (state == "success") {
                    alert("发表成功");
                    this.barrage = "";
                } else if (state == "fail") {
                    alert("发表失败，请重新编写");
                    this.barrage = "";
                }
            })
        },
        getComment(movieId) {
            this.axios.get('/getComment', {
                params: {
                    id: movieId,
                }
            }).then((res) => {
                this.allcomment = res.data;
                console.log(res.data);
            })
        },
        addPlay(movieId) {
            this.axios.get("/addPlay", {
                params: {
                    id: movieId,
                }
            })
        },
        submit() {
            this.axios.post("/submitComment", {
                userId: this.userId,
                userName: this.userName,
                movieId: this.movieId,
                comment: this.comment,
            }).then((res) => {
                let { state } = res.data.data;
                if (state == "success") {
                    alert("评论成功");
                    this.comment = "";
                    this.$router.go(0);
                } else if (state == "fail") {
                    alert("评论失败，请重新编写");
                    this.comment = "";
                }
            })
        },
        getSubmit(movieId) {
            this.axios.get('/getSubmit', {
                params: {
                    id: movieId,
                }
            }).then((res) => {
                this.comments = res.data;
                console.log(res.data);
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.play {
    width: 100%;
    .content-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        width: 1300px;
        margin: 0 auto;
        canvas {
            position: absolute;
            top: 61px;
            left: 110px;
        }
        .barrage {
            position: absolute;
            top: 80px;
            visibility: hidden;
            color: white;
            animation: barrage 7s linear 0s;
            z-index: 2;
        }
        .barrage1 {
            position: absolute;
            top: 130px;
            visibility: hidden;
            color: white;
            animation: barrage 4s linear 0s;
            z-index: 2;
        }
        .barrage2 {
            position: absolute;
            top: 180px;
            visibility: hidden;
            color: white;
            animation: barrage 11s linear 0s;
            z-index: 2;
        }
        @keyframes barrage {
            from {
                left: 900px;
                visibility: visible;
                transform: translateX(0);
            }
            to {
                left: 200px;
                visibility: visible;
                transform: translateX(-100%);
            }
        }
        .content-img {
            height: 500px;
            width: 370px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .introduction {
        position: relative;
        margin: 0 auto;
        padding: 20px 50px;
        width: 1300px;
        border: 1px solid white;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.4);
        margin-bottom: 10px;
        .all {
            width: 880px;
            display: flex;
            justify-content: space-between;
            align-content: center;
            .function {
                height: 40px;
                line-height: 40px;
                color: white;
            }
            .comment {
                width: 400px;
                padding: 0 10px;
                display: flex;
                align-items: start;
            }
        }
        .details-box {
            h1 {
                position: relative;
                color: white;
                z-index: 999;
                font-size: 24px;
                margin: 10px 0;
                font-weight: 300;
                display: inline-block;
                margin-right: 20px;
            }

            .color {
                color: white;
                margin-right: 10px;
                display: block;
            }
            .score-color {
                color: orangered;
                font-size: 20px;
            }
            .details {
                span {
                    display: block;
                    margin: 20px 0 10px 0;
                    color: white;
                }
                p {
                    color: white;
                }
            }
        }
    }
    .comment-box {
        position: relative;
        margin: 0 auto;
        padding: 20px 50px;
        width: 1300px;
        border: 1px solid white;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.4);
        margin-bottom: 10px;
        h3 {
            color: #fff;
            margin: 10px 0;
        }
        .comment-btn {
            display: flex;
        }
        .show-comments {
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 5px;
            .comments {
                color: #fff;
                margin: 15px 15px;
            }
        }
    }
}
</style>